<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head th:replace="admin/_fragments :: head(~{::title})">
        <meta charset="UTF-8">
        <!--浏览器移动端预览-->
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>博客管理</title>
        <link rel="stylesheet" href="../../static/css/semantic.min.css">
        <link rel="stylesheet" href="../../static/css/me.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    </head>
    <body>
        <!--首部-->
        <nav th:replace="admin/_fragments::menu(2)" class="ui inverted attached segment m-padded-tb-mini m-opacity-mini m-shadow-small">
            <div class="ui container">
                <div class="ui inverted secondary stackable menu">
                    <h2 class="ui teal header item">管理后台</h2>
                    <!--menu-->
                    <a href="blogs.html" class="m-item item m-mobile-hide"><i class="archive icon"></i>博客</a>
                    <a href="#" class="active m-item item m-mobile-hide"><i class="idea icon "></i>分类</a>
                    <a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i>标签</a>


                    <!--avatar box-->
                    <!--<div class="right menu m-item m-mobile-hide">-->
                    <!--    <div class="ui dropdown item">-->
                    <!--        <div class="text">-->
                    <!--            <img src="../../static/images/me.jpg" alt="" class="ui avatar image">-->
                    <!--            天乔巴夏-->
                    <!--        </div>-->
                    <!--        <i class="dropdown icon"></i>-->
                    <!--        <div class="menu">-->
                    <!--            <a href="#" class="item"><i class="icon user"></i>个人资料</a>-->
                    <!--            <a href="#" class="item"><i class="icon logout"></i>退出登录</a>-->
                    <!--        </div>-->
                    <!--    </div>-->
                    <!--</div>-->
                </div>


            </div>

            <!--<a href="#" id="side" class="ui inverted icon button m-top-right m-mobile-show">-->
            <!--    <i class="sidebar icon"></i>-->
            <!--</a>-->
        </nav>

        <!--二级导航-->
        <div class="ui attached pointing menu m-container-small">
            <div class="ui container">
                <div class="left menu m-padded-lt">
                    <h3 class="ui teal left aligned header m-text-spaced">博客</h3>
                </div>
                <div class="right menu">
                    <a href="#" class="item">发布</a>
                    <a href="#" class=" teal active item">列表</a>
                </div>
            </div>
        </div>

        <!--中间部分-->
        <div class="m-container-small basic m-padded-tb-big">

            <div class="ui container">
                <form action="#" method="post" class="ui segment form">
                    <div class="inline fields">
                        <!--分类名称-->
                        <div class="field">
                            <input type="text" name="title" placeholder="分类名称">
                        </div>

                        <div class="field">
                            <button class="ui mini teal basic button"><i class="search icon"></i>搜索</button>
                        </div>

                    </div>
                </form>

                <table class="ui celled table">
                    <thead class="center aligned ">
                    <tr>
                        <th></th>
                        <th>名称</th>
                        <th>更新时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody class="center aligned ">
                    <tr th:each="type,iterStat : ${page.content}">
                        <td th:text="${iterStat.count}">1</td>
                        <td th:text="${type.name}">Java</td>
                        <td>2020-05-23 22:22</td>
                        <td>
                            <div id="edit" class="ui mini teal button">编辑</div>
                            <a href="#" th:href="@{/admin/types/{id}/delete(id=${type.id})}" class="ui mini orange button">删除</a>
                            <span id="edit-item" th:text="${type.name}" th:hidden="true"></span>
                        </td>
                    </tr>




                    </tbody>
                    <tfoot>
                    <tr>
                        <th colspan="6" >
                            <div class="ui pagination mini menu" th:if="${page.totalPages} > 1">
                                <a th:href="@{/admin/types(page=${page.number} - 1)}" class=" icon item" th:unless="${page.first}">上一页</a>
                                <a th:href="@{/admin/types(page=${page.number} + 1)}" class=" icon item" th:unless="${page.last}">下一页</a>
                            </div>
                            <button id="type-input" class="ui green right floated basic mini button">新增</button>
                        </th>
                    </tr>
                    </tfoot>
                </table>



                <div class="add ui modal basic" >
                    <form action="#" th:action="@{/admin/types}"  method="post" class="ui segment form">
                    <div class="ui segment fluid " >
                        <div class="ui form ">
                            <!--分类名称-->
                            <div class=" field ">
                                <div class="ui right labeled input">
                                    <label class="ui teal basic label">类型名称</label>
                                    <input type="text" name="name"   placeholder="添加类型名称">
                                </div>
                            </div>
                        </div>

                    </div>


                    <div class="ui segment basic center aligned">
                        <button class="ui primary button">确认添加 </button>
                    </div>
                    </form>
                </div>
                <div class="edit ui modal basic" >
                    <form action="#" th:action="@{/admin/types}"  method="post" class="ui segment form">
                        <div class="ui segment fluid " >
                            <div class="ui form ">
                                <!--分类名称-->
                                <div class=" field ">
                                    <div class="ui right labeled input">
                                        <label class="ui teal basic label">类型名称</label>
                                        <input type="text" name="name" th:value="${edititem}">
                                    </div>
                                </div>
                            </div>

                        </div>


                        <div class="ui segment basic center aligned">
                            <button class="ui primary button">确认修改 </button>
                        </div>
                    </form>
                </div>

            </div>
        </div>


        <!--底部-->
        <footer th:replace="admin/_fragments :: footer"  class="ui inverted segment vertical m-padded-tb-massive m-padded-bottom-small ">
            <div class="ui center aligned container">
                <!--16-->
                <div class="ui inverted divided stackable grid">
                    <div class="three wide column">
                        <div class="ui inverted link list">
                            <div class="item">
                                <img src="../../static/images/contact/wechat.dib" alt="" class="ui rounded image"
                                     style="width: 110px">
                            </div>
                        </div>
                    </div>
                    <div class="three wide column">
                        <h4 class="ui inverted header m-opacity-mini">最新博客</h4>
                        <div class="ui inverted link list">
                            <a href="#" class="item">Leetcode 1 - 10</a>
                            <a href="#" class="item">Leetcode 1 - 10</a>
                            <a href="#" class="item">Leetcode 1 - 10</a>
                        </div>
                    </div>
                    <div class="three wide column">
                        <h4 class="ui inverted header m-opacity-mini">联系我</h4>
                        <div class="ui inverted link list">
                            <a href="#" class="item">Email: 1332790762@qq.com</a>
                            <a href="#" class="item">Phone: 123456789</a>
                        </div>
                    </div>
                    <div class="seven wide column">
                        <h4 class="ui inverted header m-opacity-mini">关于我</h4>
                        <p class="m-text-thin m-text-spaced m-opacity-mini">
                            Java小白，从零单排。文章如果有叙述不当的地方，还望评论区批评指正。当然，如果觉得文章对你有帮助，可以点个小小的推荐，或者关注我，一起交流，共同进步！</p>
                    </div>
                </div>
                <div class="ui inverted section divider"></div>
                <p class="m-text-thin m-text-spaced m-opacity-mini">Copyright ©2020 天乔巴夏 浙ICP备20020653号</p>
            </div>

        </footer>

        <th:block th:replace="admin/_fragments :: script">
            <!--<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>-->
            <!--<script src="../../static/js/jquery-3.5.1.min.js"></script>-->

            <!--<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>-->
            <!--<script src=../static/js/semantic.min.js"></script>-->
        </th:block>


        <script>
			$('#side').click(function () {
				$('.m-item').toggleClass('m-mobile-hide');
			})
			$('.ui.dropdown').dropdown({
				on: 'hover'
			})

            $("#type-input").click(function () {
	            $('.add.modal')
		            .modal('show')
	            ;
            })
            //todo
			$("#edit").click(function () {
				$.get()
			})
        </script>
    </body>
</html>